<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>照片墙</title>
		<link rel="icon" href="img2/favicon.ico" />
		<style>
			*{margin: 0px;padding: 0px;}
			body{margin-top:200px ;width: 100%;/*background-color: red;*/position: relative;}
			img{position: absolute;transition: all 1s;}
			img:nth-of-type(odd){width: 300px;}
			img:nth-of-type(even){width: 200px;}
			img:nth-of-type(1){transform:
			 scale(1.4) rotate(45deg) ;left: 300px;}
			 img:nth-of-type(2){transform:
			 scale(1.3) rotate(15deg) ;right: 400px;}
			 img:nth-of-type(3){transform:
			 scale(1) rotate(-18deg); left: 600px;top: -200px;}
			 img:nth-of-type(4){transform: scale(1) 
			 rotate(-15deg);left: 200px;top: -200px;}
			 img:nth-of-type(5){transform:
			 scale(1.3) rotate(18deg);left: 100px;top: -100px;}
			 img:nth-of-type(6){transform: 
			 scale(1) rotate(-18deg);left: 100px;top: 100px;}
			 img:nth-of-type(7){transform: 
			 scale(1) rotate(-18deg);left:800px;top: 100px;z-index: -1;}
			 img:nth-of-type(8){transform:
			 scale(1.4) rotate(15deg);left: 200px;top: 200px;}
			 img:nth-of-type(9){transform: 
			 scale(1)rotate(-19deg);left: 500px;top: 200px;}
			 img:nth-of-type(10){transform: 
			 scale(1) rotate(-15deg);left: 400px;top: 0px;}
			
			 img{padding:10px;
			 background-color: white;
			 border: 1px solid #ccc;}
			 img:hover{
			 	transform: rotate(0deg) scale(1.5);z-index: 1;
			 	box-shadow: 5px 5px 5px #ccc;transition-timing-function: ease-in-out;
			 }
			 .fix{position: fixed;right: 100px;top: 100px;}
			 .fix a{text-decoration:
			  none;color: darkred;font-weight: bold;
			  font-size:18px ;transition: all .6s;}
			  .fix a:hover{transform:translate(5px,5px) scale(1.2) ;color: cyan;}
		</style>
	</head>
	<body>
		<div class="img">
		<img src="img2/1.jpg"/>
		<img src="img2/2.jpg"/>
		<img src="img2/3.jpg"/>
		<img src="img2/4.jpg"/>
		<img src="img2/5.jpg"/>
		<img src="img2/6.jpg"/>
		<img src="img2/7.jpg"/>
		<img src="img2/8.jpg"/>
		<img src="img2/9.jpg"/>
		<img src="img2/10.jpg"/>
		</div>
		<div class="fix">
			<a href="homework13-2.html">下一页</a>
		</div>
	</body>
</html>
